---
title: gluestack-ui FormControl Component | Installation, Usage, and API

description: By using FormControl, developers can provide important context to form elements. This context can include whether the element is invalid, disabled, or required.

pageTitle: FormControl

pageDescription: By using FormControl, developers can provide important context to form elements. This context can include whether the element is invalid, disabled, or required.

showHeader: true
---

import { Meta } from '@storybook/addon-docs';

<Meta title="with-gluestack-style/Components/Forms/FormControl" />

import {
  FormControlHelper,
  FormControlError,
  Input,
  Box,
  Center,
  AlertCircleIcon,
  CircleIcon,
  CheckIcon,
  ChevronDownIcon,
  FormControlLabelText,
  FormControlHelperText,
  FormControlErrorIcon,
  FormControlErrorText,
  InputField,
  Text as FormControlText,
  Heading,
  Radio,
  RadioGroup,
  RadioIcon,
  RadioIndicator,
  RadioLabel,
  Checkbox,
  CheckboxGroup,
  CheckboxIndicator,
  CheckboxIcon,
  CheckboxLabel,
  Textarea,
  TextareaInput,
  Select,
  SelectTrigger,
  SelectInput,
  SelectIcon,
  SelectPortal,
  SelectBackdrop,
  SelectContent,
  SelectDragIndicatorWrapper,
  SelectDragIndicator,
  SelectItem,
  Switch,
  Slider,
  SliderTrack,
  SliderFilledTrack,
  SliderThumb,
  Modal,
  ModalBackdrop,
  ModalContent,
  ModalHeader,
  ModalCloseButton,
  ModalBody,
  ModalFooter,
  HStack,
  VStack,
  FormControl,
  FormControlLabel,
  Icon,
  Button,
  ButtonText,
} from '../../core-components/themed';
import {
  AppProvider,
  CodePreview,
  Table,
  TableContainer,
  Text,
  InlineCode,
  CollapsibleCode,
  Tabs
} from '@gluestack/design-system';
import { transformedCode } from '../../utils';
import { useState } from 'react';
import Wrapper from '../../core-components/themed/Wrapper';

This is an illustration of **FormControl** component.

<>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={true}
    metaData={{
      code: `
        <Box h="$32" w="$72">
          <FormControl {...props}>
            <FormControlLabel mb='$1'>
              <FormControlLabelText>Password</FormControlLabelText>
            </FormControlLabel>
            <Input>
              <InputField
                type="password"
                defaultValue="12345"
                placeholder="password"
              />
            </Input>
            <FormControlHelper>
              <FormControlHelperText>
                Must be at least 6 characters.
              </FormControlHelperText>
            </FormControlHelper>
            <FormControlError>
              <FormControlErrorIcon
                as={AlertCircleIcon}
              />
              <FormControlErrorText>
                At least 6 characters are required.
              </FormControlErrorText>
            </FormControlError>
          </FormControl>
        </Box>
      `,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Wrapper,
        FormControl,
        FormControlLabel,
        FormControlLabelText,
        FormControlHelper,
        FormControlHelperText,
        FormControlError,
        FormControlErrorIcon,
        FormControlErrorText,
        Icon,
        Input,
        InputField,
        AlertCircleIcon,
        Box,
      },
      argsType: {
        size: {
          control: 'select',
          options: ['sm', 'md', 'lg'],
          default: 'md',
        },
        isDisabled: {
          control: 'boolean',
          default: false,
        },
        isInvalid: {
          control: 'boolean',
          default: false,
        },
        isReadOnly: {
          control: 'boolean',
          default: false,
        },
        isRequired: {
          control: 'boolean',
          default: false,
        },
      },
    }}
  />
</>

<br />

## Installation

<Tabs value="cli" type="section">
  <Tabs.TabList>
      <Tabs.Tab value="cli">
        <Tabs.TabTitle>CLI</Tabs.TabTitle>
      </Tabs.Tab>
     <Tabs.Tab value="manual">
        <Tabs.TabTitle>Manual</Tabs.TabTitle>
     </Tabs.Tab>
  </Tabs.TabList>
  <Tabs.TabPanels>
    <Tabs.TabPanel value="cli">
<>

### Run the following command:
  ```bash
  npx gluestack-ui add form-control
  ```
</>
    </Tabs.TabPanel>
    <Tabs.TabPanel value="manual"> 
<>

### Step 1: Install the following dependencies:
```bash
npm i @gluestack-ui/form-control
```

### Step 2: Copy and paste the following code into your project.
<CollapsibleCode>

```jsx 
%%-- File: core-components/themed/form-control/index.tsx --%% 
```
</CollapsibleCode>

### Step 3: Update the import paths to match your project setup.
</>
    </Tabs.TabPanel>
  </Tabs.TabPanels>
</Tabs>

## API Reference

To use this component in your project, include the following import statement in your file.

```jsx
import { FormControl } from '@/components/ui/form-control';
```

```jsx
export default () => (
  <FormControl>
    <FormControlLabel>
      <FormControlLabelText />
    </FormControlLabel>
    <FormControlHelper>
      <FormControlHelperText />
    </FormControlHelper>
    <FormControlError>
      <FormControlErrorIcon />
      <FormControlErrorText />
    </FormControlError>
  </FormControl>
);
```

### Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

#### FormControl

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

<>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Prop</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Type</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Default</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Description</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>size</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>'sm' | 'md' | 'lg'</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>'sm'</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Sets the size of the FormControl children.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>isInvalid</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>bool</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`When true, invalid state.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>isRequired</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>bool</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`If true, astrick gets activated.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>isDisabled</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>bool</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Disabled state true.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>isReadOnly</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>bool</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`To manually set read-only state.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>isDisabled</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>bool</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`To manually set disable to the FormControl.`}</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</>

**Descendants Styling Props**
Props to style child components.

<>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Sx Prop</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Description</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>_labelText</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Prop to style FormControlLabelText Component`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>_helperText</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Prop to style FormControlHelperText Component`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>_errorText</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Prop to style FormControlErrorText Component`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>_labelAstrick</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Prop to style FormControlLabelAstrick Component`}</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</>

#### FormControlLabel

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

**Descendants Styling Props**
Props to style child components.

<>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Sx Prop</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Description</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>_labelText</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Prop to style FormControlLabelText Component`}</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</>

#### FormControlLabelText

It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.

#### FormControlHelper

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

#### FormControlHelperText

It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.

#### FormControlError

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

#### FormControlErrorIcon

It inherits all the properties of gluestack Style's [AsForwarder](/style/docs/api/as-forwarder) component.

#### FormControlErrorText

It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.

### Features

- Keyboard support for actions.
- Support for hover, focus and active states.
- Option to add your styles or use the default styles.

### Props

FormControl component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.

#### FormControl

<>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Name</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Value</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Default</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>size</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>sm | md | lg</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>md</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</>

<!--
## Spec Doc

Explore the comprehensive details of the Input in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.

<iframe
  style={{
    borderRadius: '8px',
    border: ' 1px solid rgba(0, 0, 0, 0.1)',
    aspectRatio: 736 / 585,
  }}
  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Ftype%3Ddesign%26node-id%3D5030-22048%26t%3DIS25mxEIlIP9OacJ-1%26scaling%3Dscale-down%26page-id%3D5030%253A19919%26starting-point-node-id%3D5030%253A22048%26mode%3Ddesign"
  allowfullscreen
></iframe> -->

### Examples

The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.

#### Form Control with Input

The Input Component can be incorporated within the FormControl.

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
        <FormControl minWidth='$80'>
          <FormControlLabel>
            <FormControlLabelText>
              Name
            </FormControlLabelText>
          </FormControlLabel>
          <Input>
            <InputField />
          </Input>
          <FormControlHelper>
            <FormControlHelperText>
              What would you like people to call you?
            </FormControlHelperText>
          </FormControlHelper>
        </FormControl>
      `,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Wrapper,
        FormControl,
        FormControlLabel,
        FormControlLabelText,
        FormControlHelper,
        FormControlHelperText,
        FormControlError,
        FormControlErrorIcon,
        FormControlErrorText,
        Icon,
        Input,
        InputField,
        AlertCircleIcon,
      },
      argsType: {},
    }}
  />
</Wrapper>

#### Form Control with Radio

The Radio Component can be incorporated within the FormControl.

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
        <FormControl>
          <FormControlLabel>
            <FormControlLabelText>
              Favourite fruit
            </FormControlLabelText>
          </FormControlLabel>
          <RadioGroup my='$2'>
            <VStack space="sm">
              <Radio size="sm" value="Mango">
                <RadioIndicator mr="$2">
                  <RadioIcon>
                    <CircleIcon/>
                  </RadioIcon>
                </RadioIndicator>
                <RadioLabel>
                  Mango
                </RadioLabel>
              </Radio>
              <Radio size="sm" value="Apple">
                <RadioIndicator mr="$2">
                  <RadioIcon>
                    <CircleIcon/>
                  </RadioIcon>
                </RadioIndicator>
                <RadioLabel>
                  Apple
                </RadioLabel>
              </Radio>
              <Radio size="sm" value="Orange">
                <RadioIndicator mr="$2">
                  <RadioIcon>
                    <CircleIcon/>
                  </RadioIcon>
                </RadioIndicator>
                <RadioLabel>
                  Orange
                </RadioLabel>
              </Radio>
            </VStack>
          </RadioGroup>
          <FormControlHelper>
            <FormControlHelperText>
              Choose the fruit you like the most
            </FormControlHelperText>
          </FormControlHelper>
        </FormControl>
      `,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Wrapper,
        FormControl,
        FormControlLabel,
        FormControlLabelText,
        FormControlHelper,
        FormControlHelperText,
        FormControlError,
        FormControlErrorIcon,
        FormControlErrorText,
        Icon,
        Radio,
        RadioGroup,
        RadioIcon,
        RadioIndicator,
        RadioLabel,
        AlertCircleIcon,
        VStack,
        CircleIcon,
        Heading,
      },
      argsType: {},
    }}
  />
</Wrapper>

#### Form Control with Checkbox

The Checkbox Component can be incorporated within the FormControl.

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
        <FormControl>
          <FormControlLabel>
            <FormControlLabelText>
              Sign up for newsletters
            </FormControlLabelText>
          </FormControlLabel>
          <CheckboxGroup my='$2'>
            <VStack space="sm">
              <Checkbox size="sm" value="Mango">
                <CheckboxIndicator>
                  <CheckboxIcon>
                    <CheckIcon />
                  </CheckboxIcon>
                </CheckboxIndicator>
                <CheckboxLabel>
                  Daily Bits
                </CheckboxLabel>
              </Checkbox>
              <Checkbox size="sm" value="Apple">
                <CheckboxIndicator>
                  <CheckboxIcon>
                    <CheckIcon />
                  </CheckboxIcon>
                </CheckboxIndicator>
                <CheckboxLabel>
                  Event Updates
                </CheckboxLabel>
              </Checkbox>
              <Checkbox size="sm" value="Orange">
                <CheckboxIndicator>
                  <CheckboxIcon>
                    <CheckIcon />
                  </CheckboxIcon>
                </CheckboxIndicator>
                <CheckboxLabel>
                  Sponsorship
                </CheckboxLabel>
              </Checkbox>
            </VStack>
          </CheckboxGroup>
          <FormControlHelper>
            <FormControlHelperText>
              Subscribe to newsletters for updates
            </FormControlHelperText>
          </FormControlHelper>
        </FormControl>
      `,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Wrapper,
        FormControl,
        FormControlLabel,
        FormControlLabelText,
        FormControlHelper,
        FormControlHelperText,
        FormControlError,
        FormControlErrorIcon,
        FormControlErrorText,
        Icon,
        Checkbox,
        CheckboxGroup,
        CheckboxIndicator,
        CheckboxIcon,
        CheckboxLabel,
        AlertCircleIcon,
        VStack,
        CheckIcon,
        Heading,
      },
      argsType: {},
    }}
  />
</Wrapper>

#### Form Control with Textarea

The Textarea Component can be incorporated within the FormControl.

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
        <FormControl>
          <FormControlLabel>
            <FormControlLabelText>
              Comment
            </FormControlLabelText>
          </FormControlLabel>
          <Textarea>
            <TextareaInput />
          </Textarea>
          <FormControlHelper >
            <FormControlHelperText>
              Type your comment above
            </FormControlHelperText>
          </FormControlHelper>
        </FormControl>
      `,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Wrapper,
        FormControl,
        FormControlLabel,
        FormControlLabelText,
        FormControlHelper,
        FormControlHelperText,
        FormControlError,
        FormControlErrorIcon,
        FormControlErrorText,
        Icon,
        Textarea,
        TextareaInput,
        AlertCircleIcon,
      },
      argsType: {},
    }}
  />
</Wrapper>

#### Form Control with Inline Form

Inline forms can utilize FormControl for seamless integration and enhanced functionality.

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
        <HStack space='md'>
          <FormControl>
            <Input>
              <InputField
                placeholder="Username"
              />
            </Input>
          </FormControl>
          <FormControl>
            <Select>
              <SelectTrigger>
                <SelectInput placeholder="Country"/>
                <SelectIcon mr="$3">
                  <Icon as={ChevronDownIcon} />
                </SelectIcon>
              </SelectTrigger>
              <SelectPortal>
                <SelectBackdrop />
                <SelectContent>
                  <SelectDragIndicatorWrapper>
                    <SelectDragIndicator />
                  </SelectDragIndicatorWrapper>
                  <SelectItem label="India" value="India" />
                  <SelectItem label="Sri Lanka" value="Sri Lanka" />
                  <SelectItem label="Uganda" value="Uganda" />
                  <SelectItem label="Japan" value="Japan" />
                </SelectContent>
              </SelectPortal>
            </Select>
          </FormControl>
          <FormControl>
            <Button bg='$primary600'>
              <ButtonText fontSize='$sm' fontWeight='$medium'>
                Next
              </ButtonText>
            </Button>
          </FormControl>
        </HStack>
      `,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Wrapper,
        FormControl,
        FormControlLabel,
        FormControlLabelText,
        FormControlHelper,
        FormControlHelperText,
        FormControlError,
        FormControlErrorIcon,
        FormControlErrorText,
        Icon,
        HStack,
        ChevronDownIcon,
        Input,
        InputField,
        Select,
        SelectTrigger,
        SelectInput,
        SelectIcon,
        SelectPortal,
        SelectBackdrop,
        SelectContent,
        SelectDragIndicatorWrapper,
        SelectDragIndicator,
        SelectItem,
        Button,
        ButtonText,
      },
      argsType: {},
    }}
  />
</Wrapper>

#### Form Control with Form in Modal

Modal or other Overlay components can utilize FormControl for state management and error control.

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
      function App() {
        const [showModal, setShowModal] = useState(false);
        return(
          <Center h={500}>
            <Button
              py='$2.5'
              px='$3'
              bg='$primary600'
              onPress={()=>{
                setShowModal(true);
              }}
            >
              <ButtonText>
                Change Settings
              </ButtonText>
            </Button>
            <Modal
              isOpen={showModal}
              onClose={() => {
                setShowModal(false)
              }}
              bg='$white'
            >
              <ModalBackdrop/>
              <ModalContent maxWidth='$96'>
                <ModalBody p='$5'>
                  <VStack space='xs' mb='$4'>
                    <Heading>
                      Change Settings
                    </Heading>
                    <Text size='sm'>
                      Make modifications to the settings with ease.
                    </Text>
                  </VStack>
                  <VStack py='$2' space='xl'>
                    <FormControl>
                      <FormControlLabel>
                        <FormControlLabelText>
                          Name
                        </FormControlLabelText>
                      </FormControlLabel>
                      <Input>
                        <InputField
                          value='Wade Warren'
                        />
                      </Input>
                    </FormControl>
                    <FormControl>
                      <FormControlLabel>
                        <FormControlLabelText>
                          Email
                        </FormControlLabelText>
                      </FormControlLabel>
                      <Input>
                        <InputField
                          value='wadewarren@sample.com'
                        />
                      </Input>
                    </FormControl>
                    <FormControl>
                      <FormControlLabel>
                        <FormControlLabelText>
                          Volume
                        </FormControlLabelText>
                      </FormControlLabel>
                      <Slider defaultValue={60} sliderTrackHeight={4}>
                        <SliderTrack>
                          <SliderFilledTrack/>
                        </SliderTrack>
                        <SliderThumb
                        />
                    </Slider>
                    </FormControl>
                    <FormControl>
                      <HStack space='sm'>
                        <Switch size='sm'/>
                        <FormControlLabelText>
                          Dark Mode
                        </FormControlLabelText>
                      </HStack>
                    </FormControl>
                  </VStack>
                  <Button
                    mt='$4'
                    onPress={()=>{
                      setShowModal(false);
                    }}
                  >
                    <ButtonText>
                      Save Changes
                    </ButtonText>
                  </Button>
                </ModalBody>
              </ModalContent>
            </Modal>
          </Center>
        );
      }
      `,
      transformCode: (code) => {
        return transformedCode(code, 'function', 'App');
      },
      scope: {
        Wrapper,
        useState,
        Box,
        Center,
        FormControl,
        FormControlLabel,
        FormControlLabelText,
        FormControlHelper,
        FormControlHelperText,
        FormControlError,
        FormControlErrorIcon,
        FormControlErrorText,
        Input,
        InputField,
        Button,
        ButtonText,
        Slider,
        SliderTrack,
        SliderFilledTrack,
        SliderThumb,
        Switch,
        Modal,
        ModalBackdrop,
        ModalContent,
        ModalHeader,
        ModalCloseButton,
        ModalBody,
        ModalFooter,
        Text: FormControlText,
        Heading,
        VStack,
        HStack,
      },
      argsType: {},
    }}
  />
</Wrapper>

#### Form Control with Error

Error messages can be displayed using FormControl.

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
        <FormControl isInvalid>
          <FormControlLabel>
            <FormControlLabelText>
              Which time slot works best for you?
            </FormControlLabelText>
          </FormControlLabel>
          <RadioGroup my='$2'>
            <VStack space="sm">
              <Radio size="sm" value="Mango">
                <RadioIndicator mr="$2">
                  <RadioIcon>
                    <CircleIcon/>
                  </RadioIcon>
                </RadioIndicator>
                <RadioLabel>
                  Monday
                </RadioLabel>
              </Radio>
              <Radio size="sm" value="Apple">
                <RadioIndicator mr="$2">
                  <RadioIcon>
                    <CircleIcon/>
                  </RadioIcon>
                </RadioIndicator>
                <RadioLabel>
                  Tuesday
                </RadioLabel>
              </Radio>
              <Radio size="sm" value="Orange">
                <RadioIndicator mr="$2">
                  <RadioIcon>
                    <CircleIcon/>
                  </RadioIcon>
                </RadioIndicator>
                <RadioLabel>
                  Wednesday
                </RadioLabel>
              </Radio>
            </VStack>
          </RadioGroup>
          <FormControlError>
            <FormControlErrorIcon as={AlertCircleIcon}/>
            <FormControlErrorText>
              Choose one time slot for the meeting
            </FormControlErrorText>
          </FormControlError>
        </FormControl>
      `,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Wrapper,
        FormControl,
        FormControlLabel,
        FormControlLabelText,
        FormControlHelper,
        FormControlHelperText,
        FormControlError,
        FormControlErrorIcon,
        FormControlErrorText,
        Icon,
        Radio,
        RadioGroup,
        RadioIcon,
        RadioIndicator,
        RadioLabel,
        AlertCircleIcon,
        VStack,
        CircleIcon,
        Heading,
      },
      argsType: {},
    }}
  />
</Wrapper>

#### Form Control with Form Actions

Form Action Buttons can also be utilized in conjunction with FormControl.

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
        <HStack>
          <FormControl>
            <Button action='negative' mr='$4'>
              <ButtonText>
                Delete
              </ButtonText>
            </Button>
          </FormControl>
          <FormControl>
            <Button variant='outline' action='secondary'>
              <ButtonText>
                Cancel
              </ButtonText>
            </Button>
          </FormControl>
        </HStack>
      `,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Wrapper,
        FormControl,
        FormControlLabel,
        FormControlLabelText,
        FormControlHelper,
        FormControlHelperText,
        FormControlError,
        FormControlErrorIcon,
        FormControlErrorText,
        HStack,
        Button,
        ButtonText,
      },
      argsType: {},
    }}
  />
</Wrapper>
